<script setup lang="ts">
import { ref } from "vue";
import { dataMerging } from "./hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";

import Role from "@iconify-icons/ri/admin-line";
import Password from "@iconify-icons/ri/lock-password-line";
import More from "@iconify-icons/ep/more-filled";
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";
import AddFill from "@iconify-icons/ri/add-circle-line";

defineOptions({
  name: "User"
});

const formRef = ref();
const {
  form,
  loading,
  columns,
  companyListAll,
  dataList,
  pagination,
  buttonClass,
  dialogFormVisible,
  dialogFormRef,
  dialogForm,
  rules,
  dialogTitle,
  dialogState,
  handleClose,
  submitDialog,
  openDialog,
  onSearch,
  resetForm,
  handleUpdate,
  handleDelete,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange
} = dataMerging();
</script>

<template>
  <div class="main">
    <div class="float-right w-[100%]">
      <el-form
        ref="formRef"
        :inline="true"
        :model="form"
        class="bg-bg_color w-[99/100] pl-8 pt-4"
      >
        <el-form-item label="数据源：" prop="username">
          <el-input
            v-model="form.username"
            placeholder="请输入数据源名称"
            clearable
            class="!w-[160px]"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :icon="useRenderIcon(Search)"
            :loading="loading"
            @click="onSearch"
          >
            搜索
          </el-button>
          <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
            重置
          </el-button>
        </el-form-item>
      </el-form>

      <PureTableBar title="" @refresh="onSearch" :needtool="false">
        <template v-slot="{ size, checkList }">
          <div class="table-header-btns">
            <el-button
              type="primary"
              plain
              :icon="useRenderIcon(AddFill)"
              @click="openDialog('add')"
            >
              新增
            </el-button>
            <el-button type="success" plain :icon="useRenderIcon(EditPen)">
              修改
            </el-button>
            <el-button type="danger" plain :icon="useRenderIcon(Delete)">
              删除
            </el-button>
          </div>
          <pure-table
            border
            align-whole="center"
            table-layout="auto"
            :loading="loading"
            :size="size"
            :data="dataList"
            :columns="columns"
            :checkList="checkList"
            :pagination="pagination"
            :paginationSmall="size === 'small' ? true : false"
            :header-cell-style="{
              background: 'var(--el-table-row-hover-bg-color)',
              color: 'var(--el-text-color-primary)'
            }"
            @selection-change="handleSelectionChange"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
            <template #operation="{ row }">
              <el-button
                class="reset-margin"
                link
                type="primary"
                :size="size"
                @click="openDialog('update', row)"
                :icon="useRenderIcon(EditPen)"
              >
                修改
              </el-button>
            </template>
          </pure-table>
        </template>
      </PureTableBar>
    </div>

    <el-dialog
      v-model="dialogFormVisible"
      :title="dialogTitle"
      class="!w-[560px]"
    >
      <el-form
        ref="dialogForm"
        :model="dialogFormRef"
        :rules="rules"
        :before-close="handleClose"
        append-to-body
      >
        <el-form-item label="" prop="companyListSelected">
          <el-checkbox-group v-model="dialogFormRef.companyListSelected">
            <el-checkbox
              v-for="(item, index) in companyListAll"
              :key="'company_' + index"
              :label="item"
              border
            />
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitDialog">确认</el-button>
          <el-button @click="handleClose"> 取消 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.table-header-btns {
  margin-bottom: 8px;
}
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}
:deep(.el-checkbox.is-bordered) {
  margin: 6px;
}
</style>
